<template>
  <div class="fr page">
    <div class="sui-pagination clearfix">
      <ul>
        <li class="prev" :class="pageNo == 1 ? 'disabled' : ''" @click="$emit('getPageNo', pageNo - 1)">
          <a href="javascript:;">«上一页</a>
        </li>
        <li v-if="startNumAndendNum.start > 1" @click="$emit('getPageNo', 1)" :class="pageNo === 1 ? 'actived' : ''">
          <a href="javascript:;">1</a>
        </li>
        <li class="dotted" v-if="startNumAndendNum.start > 2"><span>...</span></li>
        <li
          v-for="(page, index) in startNumAndendNum.end"
          :key="index"
          v-if="page >= startNumAndendNum.start"
          @click="$emit('getPageNo', page)"
          :class="{ actived: pageNo == page }"
        >
          <a href="#">{{ page }}</a>
        </li>

        <li class="dotted" v-if="startNumAndendNum.end < totalPages - 1"><span>...</span></li>
        <li
          v-if="startNumAndendNum.end < totalPages"
          @click="$emit('getPageNo', totalPages)"
          :class="{ actived: pageNo == totalPages }"
        >
          <a href="#">{{ totalPages }}</a>
        </li>
        <li class="next" :class="pageNo == totalPages ? 'disabled' : ''" @click="$emit('getPageNo', pageNo + 1)">
          <a href="#">下一页»</a>
        </li>
      </ul>
      <div>
        <span class="total">共{{ total }}页&nbsp;</span>
      </div>
    </div>
    <!-- <h1>"start:"{{ startNumAndendNum.start }}---"end:"{{ startNumAndendNum.end }}</h1> -->
  </div>
</template>
<script>
export default {
  name: 'Pagination',
  props: ['pageNo', 'pageSize', 'total', 'continues'],
  computed: {
    totalPages() {
      return Math.ceil(this.total / this.pageSize)
    },
    startNumAndendNum() {
      const { continues, totalPages, pageNo } = this
      let start = 0,
        end = 0
      if (continues > totalPages) {
        start = 1
        end = pageNo + parseInt(continues / 2)
      } else {
        start = pageNo - parseInt(continues / 2)
        end = pageNo + parseInt(continues / 2)
      }
      // start 可能出现小于0
      if (start < 1) {
        start = 1
        end = continues
      }
      // end 可能大于共有的页数
      if (end > totalPages) {
        start = totalPages - continues + 1
        end = totalPages
      }
      // let endArr = []
      // for (let i = 0; i <= end; i++) {
      //   if (i >= start) {
      //     console.log(i)
      //     endArr.push(i)
      //   }
      // }
      // return { start, end, endArr }
      return { start, end }
    },
  },
}
</script>
<style lang="less" scoped>
.page {
  //   width: 733px;
  //   height: 66px;
  overflow: hidden;
  .sui-pagination {
    margin: 18px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    ul {
      margin-left: 0;
      margin-bottom: 0;
      vertical-align: middle;
      //   width: 490px;
      //   float: left;
      li {
        line-height: 18px;
        display: inline-block;
        background: #eeeeee;
        a {
          position: relative;
          float: left;
          line-height: 18px;
          text-decoration: none;
          //   background-color: #fff;
          //   border: 1px solid #e0e9ee;
          //   margin-left: -1px;
          font-size: 14px;
          padding: 9px 18px;
          color: #333;
          margin: 0 1px;
        }
        &.active {
          a {
            color: #e1251b;
            border-color: #fff;
            cursor: default;
          }
        }
        &.prev {
          a {
            background-color: #fafafa;
          }
        }
        &.disabled {
          a {
            color: #999;
            cursor: not-allowed;
          }
          a:hover,
          a:visited,
          a:link,
          a:active {
            color: #999;
          }
        }
        &.dotted {
          span {
            margin-left: -1px;
            position: relative;
            float: left;
            line-height: 18px;
            text-decoration: none;
            background-color: #fff;
            font-size: 14px;
            border: 0;
            padding: 9px 18px;
            color: #333;
          }
        }
        &.next {
          a {
            // background-color: #fafafa;
            background-color: lavender;
          }
        }
      }
    }
    div {
      color: #333;
      font-size: 14px;
      margin: 0 15px;
      //   width: 241px;
    }
  }
}
.actived {
  background: skyblue !important;
}
</style>
